<template>
  <div>
    <el-pagination
      background
      prev-text="上一页"
      next-text="下一页"
      @current-change="handleCurrentChange"
      :current-page="currentPageNum"
      :page-size="pageSize"
      layout="pager,next,slot,jumper"
      :total="total"
    >
      <el-button
        :disabled="lastPageBtnDisabled"
        class="last-pager"
        @click="toLastPage"
        >尾页</el-button
      >
      <el-button disabled style="color: #666666" class="last-pager">{{
        `${"共" + lastPageNum + "页"}`
      }}</el-button>
    </el-pagination>
    <el-button
      size="mini"
      class="last-pager"
      :style="{ position: 'absolute', 'margin-top': '3px' }"
      >go</el-button
    >
  </div>
</template>
<script>
export default {
  name: "pages",
  components: {},
  data() {
    return {
      currentPageNum: this.currentPage,
      firstPageBtnDisabled: true,
      lastPageBtnDisabled: false,
      lastPageNum: Math.ceil(this.total / this.pageSize),
    };
  },
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    total(newVal, oldVal) {
      console.log("newVal111", newVal);
      this.total = newVal;
      this.lastPageNum = Math.ceil(newVal / this.pageSize);
    },
  },
  created() {},
  methods: {
    handleCurrentChange(val) {
      this.firstPageBtnDisabled = val === 1 ? true : false;
      this.lastPageBtnDisabled = val === this.lastPageNum ? true : false;
      this.currentPageNum = val;
      this.$emit("handleCurrentChangeSub", val);
    },

    toFirstPage(val) {
      this.handleCurrentChange();
    },

    toLastPage(val) {
      this.currentPageNum = this.lastPageNum;
      this.handleCurrentChange(this.lastPageNum);
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>
<style>
.el-pagination {
  float: left;
}
</style>
